<template>
<div>
<el-main class="pw-2 pt-3">
  <el-alert
    title="说明"
    type="success"
    description="关键词搜索仅支持前缀搜索;     TODO menu / is8n "
    close-text="知道了"
    class="mb-2"
  >
  </el-alert>
 <!-- table-search  -->
 <div>
  <el-input class="pb-2" style="width:200px;" placeholder="姓名|昵称|手机|邮箱"
    v-model="myParams.kword" prefix-icon="el-icon-search" @change="getTableData"></el-input>
  <el-select v-model="myParams.role" style="width:150px"
     placeholder="选择角色" class="mx-2" @change="getTableData">
      <el-option key="0" value="" label="== 角色 =="></el-option>
      <el-option v-for="item of system.dtRoles"
        :key="item[0]"
        :label="item[1]"
        :value="item[0]"
      >
        <span style="float: left">{{ item[1] }}</span>
        <span
          style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
          >{{ item[0] }}</span
        >
      </el-option>
    </el-select>
    <!-- <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button> -->
    <el-button @click="searchReset"> 重置 </el-button>
  </div>
 <!-- table  -->
 <el-table :data="myTableData" class="loading-box"
    size="mini" :stripe=true :border=true :fit=false max-height="600"
    @sort-change="sortChange"
    :default-sort="mySort" >
    <el-table-column label="ID" prop="id"
       min-width="60" sortable="custom" >
    </el-table-column>
    <el-table-column label="昵称." prop="nick"
     min-width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top">
          <template #default>
            <p>姓名: {{ scope.row.name }}</p>
          </template>
          <template #reference>
            <div class="name-wrapper">
              <el-avatar size="small"></el-avatar> &nbsp;
              <el-tag size="small">{{ scope.row.nick }}</el-tag>
            </div>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="邮箱/手机" prop="email"
      min-width="180">
      <template #default="scope">
        <div v-if="scope.row.email_auth === 1" title="已认证">
            <i class="el-icon-circle-check"></i> &nbsp;
          {{ scope.row.email ?scope.row.email : '-' }}
        </div>
        <div v-else>
        {{ scope.row.email ?scope.row.email : '-' }}
        </div>
        <div v-if="scope.row.phone_auth === 1" title="已认证">
            <i class="el-icon-circle-check"></i> &nbsp;
          {{ scope.row.phone ?scope.row.phone : '-' }}
        </div>
        <div v-else>
        {{ scope.row.phone ?scope.row.phone : '-' }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="性别" prop="sex"
       min-width="60">
      <template #default="scope">
        {{ dtSexs(scope.row.sex) }}
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="status"
      min-width="70" >
      <template #default="scope">
        <el-switch v-model="scope.row.status" @click.prevent="updOne('status',scope.row)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="角色" width="180"
      min-width="100" prop="role_id" >
      <template #default="scope">
        <el-tag class="dt-roles" :class="dtClass('role',scope.row.role_id)">{{ dtRoles(scope.row.role_id) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="注册时间"
      prop="reg_time"  min-width="150">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 6px">{{ time(scope.row.reg_time) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right"
       width="150">
      <template #default="scope">
        <el-button size="mini"
          @click="updShow('statue',scope.row)" >编辑</el-button
        >
        <el-button size="mini"
          type="danger" @click="delShow(scope.row.id)">删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <my-el-pager :myPager="myPager" :myTotal="myTotal" @myChange="pageChange"></my-el-pager>
</el-main>
<!-- table column handle  -->
<!--  <mark :myWidth="300" :myDel="del" :myTitle="'删除'" myTitle="删除" @sure="delSure"> 确定要删除 {{ del.id }} 吗 ? </mark> -->
<my-del-col :myDel="del" @mySure="delSure"> 确定要删除 {{ del.id }} 吗 ? </my-del-col>
<my-upd-col :myUpd="upd" @mySure="updSure">
  <center>{{ upd.row.name }}</center>
  <QuillEditor :content="json(upd.row)" contentType="html" toolbar="full"></QuillEditor>  </my-upd-col>
</div>
</template>

<script lang="ts">

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {API} from '@/utils/common'
declare type Numdf = number | ''
import { defineComponent } from 'vue'
import { base,baseTable } from '@/mixin/base'
// 下一行不检查 eslint-disable-next-line
// 本文件不检查 eslint-disable
// 无效只能去掉ts文件 @ts-ignore
export default defineComponent({
  name: 'user',
  mixins: [base,baseTable],
  data(){
    return {
      api: API.USER,
      del: {
        show:false,
        id:0,
      },
      upd: {
        show:false,
        row :{},
        field: '',
      },
      myParams: {
        kword: '',
        role : '' as Numdf,
      },
    }
  },
  methods: {
    searchReset() {
      this.myParams = {kword:'',role:''}
      this.getTableData()
    },
    delShow (id:number) {
      this.del.id = id
      this.del.show = true
    },
    delSure () {
      console.log('father del sure' , this.del.id)
      // TODO ajax : del data
      this.getTableData()
    },
    updShow (field:string,row) {
      this.upd.row = row
      this.upd.field = field
      this.upd.show = true
    },
    updOne (field:string,row) {
      console.log('father upd one field : ' ,field, row[field])
      // TODO ajax : update data field
      // ?怎么拿到前面的值 if not row['field'] = row['field'] ? false : true
    },
    updSure (row)  {
      console.log('father upd sure' , row)
      // TODO ajax : update data
      this.getTableData()
    },
  },
  components: { QuillEditor }
})
</script>